<template>

  <div id="user" class="user">
    <!-- header -->
    <yd-navbar slot="navbar" fixed>
      <a @click="$router.go(-1)" slot="left">
        <yd-navbar-back-icon></yd-navbar-back-icon>
      </a>
      <span slot="center" class="header_text" style="font-size:18px">个人中心</span>
      <router-link to="/user/setter" slot="right">
        <yd-icon name="setting" size="25px" color="#777"></yd-icon>
      </router-link>
    </yd-navbar>
    <!-- content -->
    <div class="content-user" fixed>
      <div class="touxiang">
        <router-link to="/user/usermsg">
          <img :src="userData.photo">
        </router-link>
        <p style="font-size:16px;margin:8px 0;">{{userData.username}}</p>
        <span style="border-right: solid 1px #fff;">积分: {{userData.point}}</span><span>余额:{{userData.wallet}} ￥</span>
      </div>

      <div class="user-menu">
        <!-- 中间菜单 -->
        <yd-grids-group :rows="5">
          <a @click="orderAll()">
            <yd-grids-item>
              <yd-icon slot="icon" name="feedback" color="#ccc" size="25px"></yd-icon>
              <span slot="text" style="font-size:12px">全部订单</span>
            </yd-grids-item>
          </a>
          <a @click="payfor()">
          <yd-grids-item>
            <yd-icon slot="icon" name="shield-outline" color="#ccc" size="25px"></yd-icon>
            <span slot="text" style="font-size:12px">待付款</span>
          </yd-grids-item>
          </a>
          <a @click="send()">
          <yd-grids-item>
            <yd-icon slot="icon" name="time" color="#ccc" size="25px"></yd-icon>
            <span slot="text" style="font-size:12px">待发货</span>
          </yd-grids-item>
          </a>
          <a @click="getgoods()">
          <yd-grids-item>
            <yd-icon slot="icon" name="footmark" color="#ccc" size="25px"></yd-icon>
            <span slot="text" style="font-size:12px">待收获</span>
          </yd-grids-item>
          </a>
          <a @click="orderExit()">
          <yd-grids-item>
            <yd-icon slot="icon" name="verifycode" color="#ccc" size="25px"></yd-icon>
            <span slot="text" style="font-size:12px">退款/售后</span>
          </yd-grids-item>
          </a>
        </yd-grids-group>

        <yd-cell-group>
          <yd-cell-item @click.native="$router.push('/user/usermsg')">
            <span slot="left">个人资料：</span>
            <router-link to="#" slot="right">
              <yd-navbar-next-icon></yd-navbar-next-icon>
            </router-link>
          </yd-cell-item>
          
          <yd-cell-item @click.native="orderAll()">
            <span slot="left">订单信息：</span>
            <router-link to="#" slot="right">
              <yd-navbar-next-icon></yd-navbar-next-icon>
            </router-link>
          </yd-cell-item>
          
          <yd-cell-item @click.native="$router.push('/user/shipping')">
            <span slot="left">收货地址：</span>
            <router-link to="/user/shipping" slot="right">
              <yd-navbar-next-icon></yd-navbar-next-icon>
            </router-link>
          </yd-cell-item>

        </yd-cell-group>

        <yd-cell-group>
          <yd-cell-item @click.native="$router.push('/user/manage')">
            <span slot="left">我的店铺：</span>
            <router-link to="/user/manage" slot="right">
              <yd-navbar-next-icon></yd-navbar-next-icon>
            </router-link>
          </yd-cell-item>
        </yd-cell-group>

        <yd-cell-group>

          <yd-cell-item>
            <span slot="left">联系客服：</span>
            <router-link to="#" slot="right">
              <yd-navbar-next-icon></yd-navbar-next-icon>
            </router-link>
          </yd-cell-item>
        </yd-cell-group>


      </div>


    </div>

    <!-- footer -->
    <v-footer></v-footer>
  </div>

</template>

<script>
  import baseService from '../axios/'
  export default {
    name: 'find',
    data() {
      return {
        message: '个人中心',
        userData: this.$store.store.state.userInfo
        //  {
        //   username: '',
        //   photo: '',
        //   wallet: '',
        //   point: ''
        // }
      }
    },
    computed: {
      pageId() {
        return this.$store.store.state.pageId
      },
      orderbtn() {
        return this.$store.store.state.orderbtn
      }
    },
    created() {
      this.doLogin()
      let id = "user"
      this.setpageId(id);
    },
    methods: {
      setpageId(id) {
        this.$store.store.commit('setpageId', id)
      },
      //中间order按钮的方法，todo简化
      setOrderbtn(value) {
        this.$store.store.commit('setOrderbtn',value)
      },
      orderAll(){
        this.setOrderbtn("orderAll");
        // console.log(this.$store.store.state.orderbtn)
        this.$router.push({
          path: '/user/order'
        })
      },
      payfor(){
        this.setOrderbtn("payfor");
        this.$router.push({
          path: '/user/order'
        })
      },
      send(){
        this.setOrderbtn("send");
        this.$router.push({
          path: '/user/order'
        })
      },
      getgoods(){
        this.setOrderbtn("getgoods");
        this.$router.push({
          path: '/user/order'
        })
      },
      orderExit(){
        this.setOrderbtn("orderExit");
        this.$router.push({
          path: '/user/order'
        })
      },
      doLogin() {
        if (this.$store.store.state.userInfo.id == undefined) {
          this.$dialog.confirm({
            mes: "用户未登录，请先登录 ！",
            opts: [{
                txt: '暂不登录，随便逛逛',
                // stay: true,
                color: '#888',
                callback: () => {
                  this.$router.push({
                    path: '/'
                  })
                }
              },
              {
                txt: '确定',
                color: true,
                callback: () => {
                  this.$router.push({
                    path: '/user/login'
                  })
                }
              }
            ]
          });
        }
      }
    }
  }

</script>

<style>
  .user .content-user {
    position: fixed;
    padding-top: 13%;
    height: 94%;
    width: 100%;
    overflow-y: auto !important;
  }

  .touxiang {
    height: 28%;
    text-align: center;
    padding-top: 10px;
  }

  .touxiang img {

    width: 18%;
    height: 45%;
    margin: 0px auto;
    border: solid 2px #fff;
    border-radius: 50%;
  }

  .touxiang span {
    display: inline-block;
    width: 80px;
  }

</style>
